import { useSpring, animated } from "react-spring";
import { type CveItem } from "~/server/api/routers/vulnerability";

interface CvssBoxProps {
  score: number;
  data?: CveItem;
}

const getSeverityColor = (severity?: string): string => {
  if (!severity) return "bg-gray-500";
  switch (severity.toLowerCase()) {
    case "none":
      return "bg-gray-500";
    case "low":
      return "bg-green-700";
    case "high":
      return "bg-red-700";
    default:
      return "bg-gray-500";
  }
};

export const CvssBox = ({ score, data }: CvssBoxProps) => {
  const props = useSpring({
    number: score,
    from: { number: 0 },
    config: {
      tension: 30,
      friction: 10,
      gentleness: 100,
    },
    delay: 50,
  });

  const cvssData = data?.metrics?.cvssMetricV31?.[0]?.cvssData;
  const confidentialityImpact = cvssData?.confidentialityImpact;
  const integrityImpact = cvssData?.integrityImpact;
  const availabilityImpact = cvssData?.availabilityImpact;

  return (
    <div className="font-orbitron relative flex flex-col">
      <div className="text-2xs mb-16 flex flex-row pb-2 text-xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70">
        CVSS BASE SCORE
      </div>
      <div className="absolute m-1 mt-2 flex flex-row p-2 pl-4 text-6xl font-light">
        <animated.div className="p-1 text-6xl">
          {props.number.interpolate((n) => n.toFixed(1))}
        </animated.div>
      </div>
      <div className="mb-4 ml-6 flex md:ml-0">
        <div className="flex h-11 w-11 flex-col border-r border-white/40">
          <div
            className={`flex flex-1 items-center justify-center text-xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70 ${getSeverityColor(
              confidentialityImpact
            )}`}
          >
            {confidentialityImpact}
          </div>
          <div
            className={`flex flex-1 items-center justify-center ${getSeverityColor(
              confidentialityImpact
            )}`}
          >
            C
          </div>
        </div>
        <div className="flex h-11 w-11 flex-col border-r border-white/40">
          <div
            className={`flex flex-1 items-center justify-center text-xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70 ${getSeverityColor(
              integrityImpact
            )}`}
          >
            {integrityImpact}
          </div>
          <div
            className={`flex flex-1 items-center justify-center ${getSeverityColor(
              integrityImpact
            )}`}
          >
            I
          </div>
        </div>
        <div className="flex h-11 w-11 flex-col">
          <div
            className={`flex flex-1 items-center justify-center text-xs font-bold uppercase tracking-wider text-violet-100 text-opacity-70 ${getSeverityColor(
              availabilityImpact
            )}`}
          >
            {availabilityImpact}
          </div>
          <div
            className={`flex flex-1 items-center justify-center ${getSeverityColor(
              availabilityImpact
            )}`}
          >
            A
          </div>
        </div>
      </div>
    </div>
  );
};
